<template>
  <div class="tag-wrap">
    <el-tabs
    v-model="activeTab"
    type="card"
    class="demo-tabs"
    @tab-remove="removeTab"
    @tab-change="changeTab"
  >
    <el-tab-pane
      class="tab-item"
      v-for="item in tabList"
      :key="item.path"
      :label="item.name"
      :name="item.path"
    :closable="item.path !== '/home'"
    >
    </el-tab-pane>
  </el-tabs>
  <el-dropdown class="drop-down" @command="handleClick">
    <el-button >
       <el-icon><arrow-down /></el-icon>
      </el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="clearOther">关闭其他</el-dropdown-item>
          <el-dropdown-item command="clearAll">关闭全部</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup>
import { ref,watch,onMounted } from 'vue'
import { useRouter, useRoute, onBeforeRouteUpdate } from 'vue-router'

const $route = useRoute()
const $router = useRouter()

let activeTab = ref($route.path)

const tabList = ref([
  { name: '首页', path: '/home' },

])

onMounted(() => {
  tabList.value = sessionStorage.getItem('tabList') ? JSON.parse(sessionStorage.getItem('tabList')) : tabList.value
})

// 移除标签页，移除时候，会跳到下一个标签页，没有下一个会跳到上一个。
const removeTab = (tabName) => {
  console.log('tabname remove',tabName);
  let aTab = activeTab.value;
  let oTabList = tabList.value
  // 判断当前关闭的标签页，是否是选中的标签页
  if(aTab === tabName) {
    oTabList.forEach((item, index) => {
      if(item.path === tabName) {
        const nextTab = oTabList[index+1] || oTabList[index -1]
        if(nextTab) aTab = nextTab.path
      }
    })
  }
  activeTab.value = aTab
  tabList.value = oTabList.filter(item => item.path !== tabName)
  sessionStorage.setItem('tabList', JSON.stringify(tabList.value))
}
// 切换标签页
const changeTab = (t) => {
  
  activeTab.value = t
  $router.push(t)
}
// 添加标签页
const addTab = (tab) => {
  let noTab = tabList.value.findIndex(item => item.path === tab.path) === -1
  if(noTab) {
    tabList.value.push(tab)
  }
  sessionStorage.setItem('tabList', JSON.stringify(tabList.value))
}
watch(() => $route, (to) => {
  console.log('watch',to);
  activeTab.value = to.path
  addTab({
    path: to.path,
    name: to.meta.title
  })
}, {deep: true})
// route 地址切换前调用
onBeforeRouteUpdate((to) => {
  // console.log('before route', to.path);
  
  // activeTab.value = to.path
  // addTab({
  //   path: to.path,
  //   name: to.meta.title
  // })
})
// 点击右侧下拉菜单
const handleClick = (val) => {

  // 关闭其他
  if(val === 'clearOther') {
  // tablist 过滤只剩下当前页和首页
    tabList.value = tabList.value.filter(item => item.path === '/home' || item.path === activeTab.value)
  } else if(val === 'clearAll') { // 关闭全部
    // 激活状态为首页
    activeTab.value = '/home'
    // tablist 过滤只剩下首页
    tabList.value = [
      { name: '首页', path: '/home' },
    ]
  }
}
</script>

<style scoped lang="scss">
.tag-wrap {
  padding-bottom: 5px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  .demo-tabs {
    width: calc(100% - 55px);
    :deep(.el-tabs__header) {
      margin: 0;
      border-bottom: 0;
    }
    :deep(.el-tabs__item) {
      border-bottom: 0;
      background: #FFF;
      border-radius: 4px;
      margin-right: 3px;
      height: 32px;
    }
    :deep(.el-tabs__nav) {
      border:none;
    }
  }
  .drop-down {
    width: 50px;
    padding-top: 5px;
  }
}
</style>